<template>
  <div class="Fg-menu-button" :class="'Fg-menu-button--'+type" @click.stop="handleClick">
    <svg-icon :iconClass="svg" v-if="svg" />
    <i :class="icon" v-if="icon"></i>
  </div>
</template>

<script>
export default {
  name: "MenuButton",
  props: {
    icon: {
      type: String,
      default: "",
    },
    svg: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
  },
  methods: {
    handleClick(e) {
      this.$emit("click", e);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../styles/generator.scss";
$size: 20px;
.Fg-menu-button {
  display: inline-block;
  position: relative;
  width: $size;
  height: $size;
  text-align: center;
  line-height: $size;
  font-size: 11px;
  color: #fff;
  background-color: $themeColor;
  letter-spacing: 0;
  // border-radius: 2px;
  cursor: pointer;
  z-index: 2;
}
.Fg-menu-button + .Fg-menu-button {
  margin-left: 2px;
}
.Fg-menu-button--danger {
  background-color: #f56c6c;
}
</style>